<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :before-close="crud.cancelCU"
    :visible="crud.status.cu > 0"
    :title="crud.status.title"
    width="500px"
  >

    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      size="small"
      label-width="80px"
    >
      <el-form-item
        label="用户名"
        prop="username"
      >
        <el-input
          v-model="form.username"
          style="width: 370px;"
        />
      </el-form-item>
      <el-form-item
        v-if="!crud.status.edit"
        label="密码"
        prop="password"
      >
        <el-input
          v-model="form.password"
          style="width: 370px;"
        />
      </el-form-item>
      <el-form-item
        label="姓名"
        prop="fullName"
      >
        <el-input
          v-model="form.fullName"
          style="width: 370px;"
        />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.sex" style="width: 178px">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model.number="form.mobile" />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="form.status" style="width: 178px">
          <el-radio :label="1">激活</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="单位">
        <treeselect
          v-model="form.deptIdList"
          :multiple="true"
          :flat="true"
          :options="depts"
          style="width: 370px;"
          placeholder="选择单位"
        />
      </el-form-item>
      <el-form-item style="margin-bottom: 0;" label="角色" prop="roleIdList">
        <el-select
          v-model="form.roleIdList"
          style="width: 370px"
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in roles"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="text"
        @click="crud.cancelCU"
      >
        取消
      </el-button>
      <el-button
        :loading="crud.status.cu === 2"
        type="primary"
        @click="crud.submitCU"
      >
        确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { form } from '@crud/crud'
import { isvalidPhone } from '@/utils/validate'
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { list_to_vuetree } from '@/utils'
import { getRoleList } from '@/api/sys/role'
import { getDeptList } from '@/api/sys/dept'

const defaultForm = {
  userId: null,
  username: '',
  password: '',
  fullName: '',
  email: null,
  mobile: null,
  sex: 1,
  status: 1,
  roleIdList: [],
  deptIdList: [],
  roles: []
}

export default {
  components: {
    Treeselect
  },
  mixins: [form(defaultForm)],

  data() {
    // 自定义验证
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!isvalidPhone(value)) {
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        fullName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        mobile: [
          { trigger: 'blur', validator: validPhone }
        ]
      },
      depts: [],
      roles: []
    }
  },

  watch: {
    'crud.status.cu': function(v) {
      if (v > 0) {
        getDeptList().then(res => {
          this.depts = list_to_vuetree(res.data.list, 'deptId', 'name')
        })
        getRoleList().then(res => {
          const roleList = [];
          for (let i = 0; i < res.data.list.length; i++) {
            const item = res.data.list[i];
            const role = { id: item.roleId, name: item.roleName };
            roleList.push(role);
          }
          this.roles = roleList;
        })
      }
    }
  },

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
 ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
